<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>在线举报</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/form.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="lib/autoSize.js"></script>
</head>
<body>
<form class="form-horizontal" enctype="multipart/form-data" method="post">
    <div class="form-group">
        <label for="titleName" class="col-sm-4 control-label">举报对象</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="titleName" placeholder="清输入举报对象" name="titleName">
        </div>
    </div>
    <div class="form-group" style="height: 5rem">
        <label for="content" class="col-sm-4 control-label" style="line-height: 1.2rem">举报内容</label>
        <div class="col-sm-8">
            <textarea id="content" class="form-control" placeholder="请输入具体描述（必填，200字以内）" name="content" style="height: 90%"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label for="phone" class="col-sm-4 control-label">手机号</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="phone" placeholder="请输入手机号" name="phone">
        </div>
    </div>
    <div class="form-group">
        <label for="verifyCode" class="col-sm-4 control-label">验证码</label>
        <div class="col-sm-8" style="position: relative">
            <input type="text" class="form-control" id="verifyCode" placeholder="请输入验证码" name="verifyCode" maxlength="6">
            <div id="verifyCodeBtn" class="input-group-addon"
                 style="color:#0778dd;font-size: 0.6rem;position: absolute;right: 0.5rem;top: 0;height:2.5rem;line-height: 2.5rem"
                 onclick="getVerifyCode()">获取验证码
            </div>
        </div>
    </div>
    <div class="form-group picture-upload">
        <label class="col-sm-4 control-label">图片</label>
        <div class="col-sm-8 upload-box">
            <input type="file" class="form-control upload-btn" id="picture1" name="pictureFile1">
            <div class="input-group-addon"><span>还未选择文件</span><i
                    class="fa fa-image"></i></div>
        </div>
    </div>
    <div class="form-group picture-upload">
        <label class="col-sm-4 control-label">图片</label>
        <div class="col-sm-8 upload-box">
            <input type="file" class="form-control upload-btn" id="picture2" name="pictureFile2">
            <div class="input-group-addon"><span>还未选择文件</span><i
                    class="fa fa-image"></i></div>
        </div>
    </div>
    <div class="form-group picture-upload">
        <label class="col-sm-4 control-label">图片</label>
        <div class="col-sm-8 upload-box">
            <input type="file" class="form-control upload-btn" id="picture3" name="pictureFile3">
            <div class="input-group-addon"><span>还未选择文件</span><i
                    class="fa fa-image"></i></div>
        </div>
    </div>
    <div class="form-group picture-upload">
        <label class="col-sm-4 control-label">图片</label>
        <div class="col-sm-8 upload-box">
            <input type="file" class="form-control upload-btn" id="picture4" name="pictureFile4">
            <div class="input-group-addon"><span>还未选择文件</span><i
                    class="fa fa-image"></i></div>
        </div>
    </div>
    <div class="tips-info">温馨提示：最多上传4个附件，仅限图片，每个附件大小不超过5M</div>
    <div class="form-group video-upload">
        <label class="col-sm-4 control-label">视频</label>
        <div class="col-sm-8 upload-box">
            <input type="file" class="form-control upload-btn" id="video1" name="videoFile1">
            <div class="input-group-addon"><span>还未选择文件</span><i
                    class="fa fa-video-camera"></i></div>
        </div>
    </div>
    <div class="form-group video-upload">
        <label class="col-sm-4 control-label">视频</label>
        <div class="col-sm-8 upload-box">
            <input type="file" class="form-control upload-btn" id="video2" name="videoFile2">
            <div class="input-group-addon"><span>还未选择文件</span><i
                    class="fa fa-video-camera"></i></div>
        </div>
    </div>
    <div class="form-group video-upload">
        <label class="col-sm-4 control-label">视频</label>
        <div class="col-sm-8 upload-box">
            <input type="file" class="form-control upload-btn" id="video3" name="videoFile3">
            <div class="input-group-addon"><span>还未选择文件</span><i
                    class="fa fa-video-camera"></i></div>
        </div>
    </div>
    <div class="form-group video-upload">
        <label class="col-sm-4 control-label">视频</label>
        <div class="col-sm-8 upload-box">
            <input type="file" class="form-control upload-btn" id="video4" name="videoFile4">
            <div class="input-group-addon"><span>还未选择文件</span><i
                    class="fa fa-video-camera"></i></div>
        </div>
    </div>
    <div class="tips-info">温馨提示：最多上传4个附件，仅限视频，每个附件大小不超过5M</div>
    <div style="text-align: center;margin-top: 1rem;color: white">
        <div class="col-sm-12">
            <button type="submit" class="btn btn-default" onclick="return checkForm()">提 交</button>
        </div>
    </div>
</form>
<script src="lib/fastclick.js"></script>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/jquery.form.min.js"></script>
<script src="lib/layer.js"></script>
<script>
    var flag = true;

    //    验证码倒计时
    var timer = null;

    function verifyTime() {
        var time = 120;
        timer = setInterval(function () {
            time--;
            $("#verifyCodeBtn").text(time).css("color", "#bbb");
            if (time === 0) {
                clearInterval(timer);
                $("#verifyCodeBtn").css("color", "#0778dd").text("获取验证码");
                flag = true;
            }
        }, 1000);
    }

    $('.video-upload').eq(0).css('display', 'flex');
    $('.picture-upload').eq(0).css('display', 'flex');
    $('#picture1').change(function () {
        if (checkPictureFile(this)) {
            $('.picture-upload').eq(1).css('display', 'flex');
        }
    });
    $('#picture2').change(function () {
        if (checkPictureFile(this)) {
            $('.picture-upload').eq(2).css('display', 'flex');
        }
    });
    $('#picture3').change(function () {
        if (checkPictureFile(this)) {
            $('.picture-upload').eq(3).css('display', 'flex');
        }
    });
    $('#picture4').change(function () {
        if (checkPictureFile(this)) {
            checkPictureFile(this)
        }
    });

    $('#video1').change(function () {
        if (checkVideoFile(this)) {
            $('.video-upload').eq(1).css('display', 'flex');
        }
    });
    $('#video2').change(function () {
        if (checkVideoFile(this)) {
            $('.video-upload').eq(2).css('display', 'flex');
        }
    });
    $('#video3').change(function () {
        if (checkVideoFile(this)) {
            $('.video-upload').eq(3).css('display', 'flex');
        }
    });
    $('#video4').change(function () {
        checkVideoFile(this)
    });

    function checkFileExt(fileName, allowList) {
        var fileExt = fileName.substring(fileName.lastIndexOf('.') + 1);
        return allowList.indexOf(fileExt) !== -1;
    }

    function checkPictureFile(fileInput) {
        console.log(fileInput.files[0]);
        var fileName = fileInput.files[0] && fileInput.files[0].name;
        var fileSize = fileInput.files[0] && fileInput.files[0].size;
        var allowList = ['jpg', 'png'];
        if(fileSize/1024/1024>5){
            fileInput.value = '';
            $(fileInput).next().find('span').text('文件最大不超过5M').addClass('error');
            return false;
        }
        if (fileName) {
            if (checkFileExt(fileName, allowList)) {
                $(fileInput).next().find('span').text(fileName).removeClass('error');
                return true;
            } else {
                fileInput.value = '';
                $(fileInput).next().find('span').text('不允许的上传类型').addClass('error');
            }
        } else {
            fileInput.value = '';
            $(fileInput).next().find('span').text('还未选择文件').addClass('error');
        }
        return false;
    }

    function checkVideoFile(fileInput) {
        var fileName = fileInput.files[0] && fileInput.files[0].name;
        var fileSize = fileInput.files[0] && fileInput.files[0].size;
        var allowList = ['mp4', 'avi'];
        if(fileSize/1024/1024>5){
            fileInput.value = '';
            $(fileInput).next().find('span').text('文件最大不超过5M').addClass('error');
            return false;
        }
        if (fileName) {
            if (checkFileExt(fileName, allowList)) {
                $(fileInput).next().find('span').text(fileName).removeClass('error');
                return true;
            } else {
                fileInput.value = '';
                $(fileInput).next().find('span').text('不允许的上传类型').addClass('error');
            }
        } else {
            fileInput.value = '';
            $(fileInput).next().find('span').text('还未选择文件').addClass('error');
        }
        return false;
    }

    function checkForm() {
        var titleName=$('[name="titleName"]').val();
        var content=$('[name="content"]').val();
        var phone=$('[name="phone"]').val();
        var verifyCode=$('[name="verifyCode"]').val();
        if($.trim(titleName)===''){
            layer.open({
                content:'请填写举报对象',
                btn:['确认']
            })
            return false;
        }else if($.trim(content)===''){
            layer.open({
                content:'请填写请填写举报内容',
                btn:['确认']
            })
            return false;
        }else if ($.trim(phone)===''){
            layer.open({
                content:'请填写正确的手机号',
                btn:['确认']
            })
            return false
        }else if ($.trim(verifyCode)===''){
            layer.open({
                content:'请填写验证码',
                btn:['确认']
            })
            return false
        }
        return true;
    }
    var options = {
        success: function (result) {
            if(result.code===1){
                layer.open({
                    content:result.msg,
                    btn:['确认'],
                    yes:function () {
                        location.replace('?'+Math.random())
                    }
                });
            }else {
                layer.open({
                    content:result.msg,
                    btn:['确认']
                });
            }
        }
    };
    $("form").ajaxForm(options);

    function getVerifyCode() {
        if(flag){
            flag=false;
            $.ajax({
                url:'getVerifyCode',
                type:'get',
                data:{
                    phone:$('[name="phone"]').val()
                },
                success:function (result) {
                    layer.open({
                        content:result.msg,
                        btn:['确认']
                    });
                    if(result.code===1){
                        verifyTime()
                    }else {
                        flag=true;
                    }
                }
            })
        }
    }
</script>
</body>
</html>